﻿<template>
    <eg-layout title="用户管理"
               icon="el-icon-s-custom">
        <div slot="header">
            <el-form :inline="true" :model="filter">
                <el-form-item>
                    <el-button type="primary"
                               icon="el-icon-plus"
                               @click="onAdd">新用户</el-button>
                </el-form-item>
            </el-form>
        </div>
        <el-table :data="gridData"
                  stripe
                  border
                  sortable="custom"
                  @sort-change="onTableSortChange"
                  style="width: 100%">

            <el-table-column label="操作"
                             width="100"
                             fixed="left">
                <div slot-scope="scope">
                    <el-button type="text"
                               size="mini"
                               @click="onGridRowEdit(scope.row)">编辑</el-button>

                    <el-button type="text"
                               size="mini"
                               @click="onGridRowDel(scope.row)">删除</el-button>
                </div>
            </el-table-column>
            <el-table-column prop="userName"
                             label="用户姓名"
                             width="120"
                             sortable>
            </el-table-column>
            <el-table-column prop="name"
                             label="名"
                             width="120"
                             sortable>
            </el-table-column>
            <el-table-column prop="surname"
                             label="姓"
                             width="120"
                             sortable>
            </el-table-column>

            <el-table-column prop="email"
                             label="邮箱"
                             width="140"
                             sortable>
            </el-table-column>
            <el-table-column prop="phoneNumber"
                             label="手机"
                             width="140"
                             sortable>
            </el-table-column>
        </el-table>

        <el-pagination @size-change="onSizeChange"
                       @current-change="onCurrentChange"
                       :current-page="filter.pageIndex"
                       :page-sizes="[10, 30, 50, 100]"
                       :page-size="filter.pageSize"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="gridTotal">
        </el-pagination>

        <el-dialog :title="dialogEditId===''?'新用户':'编辑'"
                   width="800px"
                   :visible.sync="dialogEditVisible">
            <MyEdit ref="edit"
                    :id="dialogEditId"
                    :key="dialogEditKey"
                    @change="onEditChange"
                    @cancel="dialogEditVisible=false"></MyEdit>
        </el-dialog>
    </eg-layout>
</template>

<script>
    import MyEdit from './Edit';
    export default {
        components: {
            MyEdit
        },
        data() {
            return {
                filter: {

                },
                gridData: [],
                gridTotal: 0,

                //详情弹窗
                dialogEditId: '',
                dialogEditVisible: false,
                dialogEditKey: '',
            }
        },
        mounted() {
            var self = this;
            self.refresh();
        },
        methods: {
            //列表 BEGIN
            refresh() {
                var self = this;
                self.$http
                    .get('/api/identity/users', self.filter)
                    .then((res) => {
                        console.log(res);
                        self.gridData = res.items;
                        self.gridTotal = res.totalCount;
                    });
            },
            //分页
            onTableSortChange({ prop, order }) {
                var self = this;
                self.filter.SkipCount = 0;
                self.filter.Sorting = prop + (order === "descending" ? ' desc' : ' asc');
                self.refresh();
            },
            onSizeChange(val) {
                var self = this;
                self.filter.pageSize = val;
                self.refresh();
            },
            onCurrentChange(val) {
                var self = this;
                self.filter.pageIndex = val;
                self.refresh();
            },

            //列表操作
            onGridRowEdit(row) {
                var self = this;
                self.openEdit(row.id);
            },
            onGridRowDel(row) {
                var self = this;

                self.$confirm("用户 '" + row.userName + "' 将被删除. 你确定吗?", "提示", {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    self.$http
                        .delete('/api/identity/users/' + row.id)
                        .then(() => {
                            self.refresh();
                        });
                }).catch(() => {

                });
            },
            onSearch() {
                var self = this;
                self.refresh();
            },

            //列表 NED


            //编辑弹窗 BEGIN
            onAdd() {
                var self = this;
                self.openEdit('');
            },
            openEdit(id) {
                var self = this;
                //刷新页面
                self.dialogEditKey = new Date().getTime().toString();
                self.dialogEditId = id;
                self.dialogEditVisible = true;
            },
            onEditChange() {
                var self = this;
                self.refresh();
                self.dialogEditVisible = false;
            }
            //编辑弹窗 END
        }
    }
</script>

<style scoped>
</style>